導覽列（Navigation Bar）是網頁的「大腦」，它能幫助使用者快速找到他們想去的頁面。
今天將結合 <nav>、<ul>、<a> 標籤和 CSS，打造一個美觀又實用的導覽列。
一個基本的導覽列通常由一個 <ul> 標籤包住多個 <li> 標籤，每個 <li> 裡面再放一個 <a> 標籤。

HTML
<nav>
  <ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">作品集</a></li>
    <li><a href="#">關於我</a></li>
    <li><a href="#">聯絡我</a></li>
  </ul>
</nav>

接下來，用 CSS 來把它變成一個漂亮的水平導覽列：

1. 移除清單樣式： 使用 list-style-type: none; 移除項目符號。
2. 移除內外邊距： 設定 margin: 0; 和 padding: 0;。
3. 水平排列： 最常用的方法是讓 <li> 變成行內區塊元素 display: inline-block; 或使用 Flexbox。
4. 美化連結： 移除 <a> 的底線 text-decoration: none;，並調整顏色、大小和內邊距。

為作品集頁面設計一個導覽列。
在 index.html 中加入：

HTML
<nav class="main-nav">
  <ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">作品集</a></li>
    <li><a href="#">關於我</a></li>
    <li><a href="#">聯絡我</a></li>
  </ul>
</nav>

在 style.css 中加入：

CSS
.main-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #34495e;
  overflow: hidden;
  text-align: center;
}
.main-nav li {
  display: inline-block;
}
.main-nav li a {
  display: block;
  color: white;
  padding: 15px 20px;
  text-decoration: none;
  font-weight: bold;
}
.main-nav li a:hover {
  background-color: #e74c3c;
}

這是一個非常實用且常見的導覽列寫法，而且還加上了滑鼠懸停變色的效果。明天將回顧這 10 天的學習內容，為第一階段做個總結。

執行成果 :